<script setup>
import {Edit, Setting, User, KnifeFork, More, Refresh,Document, CoffeeCup} from '@element-plus/icons-vue'
</script>

<template>
  <div class="div01">菜单栏</div>
  <el-menu
      :default-active="$route.path"
      class="menu01"
      router
  >
    <el-menu-item index="/">
      <el-icon>
        <Edit/>
      </el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-menu-item index="/general">
      <el-icon>
        <Setting/>
      </el-icon>
      <span>通用</span>
    </el-menu-item>

    <el-sub-menu index="">
      <template #title>
        <el-icon>
          <User/>
        </el-icon>
        <span>求生者</span>
      </template>

      <el-menu-item index="/survivor/general">
        <el-icon>
          <User/>
        </el-icon>
        <span>求生者通用</span>
      </el-menu-item>

      <el-menu-item index="/survivor/character">
        <el-icon>
          <User/>
        </el-icon>
        <span>各求生者</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/hunter">
      <template #title>
        <el-icon>
          <KnifeFork/>
        </el-icon>
        <span>监管者</span>
      </template>

      <el-menu-item index="/hunter/general">
        <el-icon>
          <KnifeFork/>
        </el-icon>
        <span>监管者通用</span>
      </el-menu-item>

      <el-menu-item index="/hunter/character">
        <el-icon>
          <KnifeFork/>
        </el-icon>
        <span>各监管者</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/other">
      <template #title>
        <el-icon>
          <More/>
        </el-icon>
        <span>其他模式</span>
      </template>

      <el-menu-item index="/other/general">
        <el-icon>
          <Setting/>
        </el-icon>
        <span>其他通用</span>
      </el-menu-item>

      <el-menu-item index="/other/mode">
        <el-icon>
          <Setting/>
        </el-icon>
        <span>各模式</span>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/tips">
      <el-icon>
        <Document/>
      </el-icon>
      <span>使用说明</span>
    </el-menu-item>

    <el-menu-item index="/update">
      <el-icon>
        <Refresh/>
      </el-icon>
      <span>更新日志</span>
    </el-menu-item>

    <el-menu-item index="/author">
      <el-icon>
        <CoffeeCup/>
      </el-icon>
      <span>作者</span>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.div01 {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
}
</style>